<template>

    <div class="wallet-recharge-record">
        <h3>Transaction record</h3>

        <div class="wallet-recharge-table">
            <dl>
                <dt>
                    <span>Transaction ID</span>
                    <span>Creation date</span>
                    <span>Transfer method</span>
                    <span>Transfer amount</span>
                    <span>Deposit amount</span>
                    <span>Status</span>
                </dt>
                <dd v-for="item in records" :key="item.id" @click="openDetail(item)">
                    <span v-text="item.id || '---'"></span>
                    <span v-text="getTimeByDate(item.created_at_unix, 'YY-MM-DD')"></span>
                    <span v-text="getMethod(item)"></span>
                    <span v-text="item.currency + ' ' + getPriceFormat(item.transfer_amount)"></span>
                    <span v-text="'USD ' + getPriceFormat(item.recharge_amount)"></span>
                    <span v-html="getStatusHtml(item.status)"></span>
                </dd>
            </dl>

            <CommonPage v-show="total > 5" :current-page="page" :page-size="5" :total="total"
                        @current-change="handleCurrentChange"></CommonPage>

        </div>


        <UxDialog :visible="dialog" @close="dialog = null">

            <div class="recharge-detail">

                <template v-if="detail">
                    <h2>
                        <strong>Transaction ID: {{ detail.id }}</strong>
                        <span :status="detail.status" v-html="getStatusHtml(detail.status)"></span>
                    </h2>
                    <h3>Creation date: {{ getTimeByDate(detail.created_at, 'YY-MM-DD') }}</h3>
                    <h3 v-if="detail.status == 2"
                        v-text="'Completion date: ' + getTimeByDate(detail.completed_at, 'YY-MM-DD')" />
                    <h3 v-if="detail.status == 3"
                        v-text="'Cancellation date: ' + getTimeByDate(detail.canceled_at, 'YY-MM-DD')" />


                    <h4>Credit information</h4>
                    <div class="detail-actual">

                        <div class="detail-actual-amount">
                            <p>
                                <strong>Actual credited amount:</strong>
                                <span v-if="detail.status == 1">Not yet credited</span>
                                <span v-if="detail.status == 2"
                                      v-text="detail.currency + ' ' + getPriceFormat(detail.arrival_amount)"></span>
                                <span v-if="detail.status == 3" v-text="detail.currency + ' 0.00'"></span>

                            </p>
                            <p v-if="detail.currency != 'USD'">
                                <strong>Convert to USD:
                                    <em>({{ detail.currency }} : USD = 1 :
                                        {{ (1 / detail.current_exchange_rate).toFixed(5) }})</em>
                                </strong>
                                <span v-if="detail.status == 1" v-text="'0.00'"></span>
                                <span v-if="detail.status == 2" v-text="getPriceFormat(price.rate)"></span>
                                <span v-if="detail.status == 3" v-text="'0.00'"></span>
                            </p>
                            <p>
                                <strong>{{ detail.rebate_points }}% Cashback:</strong>
                                <span v-if="detail.status == 1" v-text="'+ 0.00'"></span>
                                <span v-if="detail.status == 2" v-text="'+ ' + getPriceFormat(price.discount)"></span>
                                <span v-if="detail.status == 3" v-text="'+ 0.00'"></span>
                            </p>
                        </div>

                        <div class="detail-actual-total">
                            <span>Deposit amount:</span>
                            <strong v-if="detail.status == 1" v-text="'Not yet credited'"></strong>
                            <strong v-if="detail.status == 2" v-text="'USD ' + getPriceFormat(price.total)"></strong>
                            <strong v-if="detail.status == 3" v-text="'USD 0.00'"></strong>
                        </div>
                    </div>

                    <h4>Transfer information</h4>
                    <div class="detail-transfer">
                        <h5>
                            <span>Transfer amount:</span>
                            <strong v-text="detail.currency + ' ' + getPriceFormat(detail.transfer_amount)"></strong>
                        </h5>

                        <p>
                            <span>Transfer method:</span>
                            <strong v-text="getMethod(detail)"></strong>
                        </p>
                        <p>
                            <span>Cardholder name:</span>
                            <strong v-text="detail.cardholder"></strong>
                        </p>
                        <p>
                            <span>Phone:</span>
                            <strong v-text="detail.phone"></strong>
                        </p>

                        <figure>
                            <img :src="$getImageUrl(detail.transfer_screenshot)"
                                 v-lazy="$getImageUrl(detail.transfer_screenshot)" alt="">
                            <span @click="doPreview()"><svg-icon name="user-files-preview" /></span>

                        </figure>
                    </div>


                    <h4>Payee information</h4>
                    <div class="detail-bank" v-html="contentFormat(detail.recharge_content)"></div>

                </template>

                <UxLoading2 :loading="loading" />
                <UxImagePreview v-model="preview" />

            </div>
        </UxDialog>

    </div>

</template>
<script>
import { payment_type, trade_type } from "@/utils/payment-type";
export default {
    props: {
        config: { type: Object, default: () => ({}) },
        records: { type: Array, default: () => [] },
        page: { type: Number, default: () => 0 },
        total: { type: Number, default: () => 0 },
    },
    data () {
        return {
            dialog: null,
            loading: false,
            detail: null,
            preview: null,
        };
    },

    computed: {
        // 价格
        price () {

            if (this.detail) {
                // 转美分
                const original = this.detail.arrival_amount
                const price_rate = Math.ceil(original / this.detail.current_exchange_rate)
                const price_discount = Math.ceil(price_rate * this.detail.rebate_points / 100)
                const price_total = price_rate + price_discount

                return {
                    original: original,
                    rate: price_rate,
                    discount: price_discount,
                    total: price_total,
                }
            } else {
                return {}
            }
        }
    },

    methods: {

        // 打开详情
        openDetail (item) {
            this.detail = null;
            this.dialog = item;
            this.preview = null;
            this.getDetail()
        },


        doPreview () {
            this.preview = {
                index: 0,
                images: [this.$getImageUrl(this.detail.transfer_screenshot)]
            }
        },

        contentFormat (str) {
            const res = (String(str || '').match(/<p>[\w\W]+?<\/p>/g) || []).map(line => {
                const arr = line.replace(/<\/?p>/g, '').split(/\s?[:：]\s?/g);
                if (arr.length == 1) {
                    return line
                } else {
                    return `<p><span>${arr[0]} :</span><strong>${arr.slice(1).join('')}</strong></p>`
                }
            }).join('')
            return res;
        },

        // 获取详情
        async getDetail () {
            this.loading = true;
            this.$http('Wallet.getRechargeDetail/' + this.dialog.id).then(res => {
                this.loading = false;
                this.detail = res.data || {}
            })
        },

        getTimeByDate (date, format) {
            let str = "";
            if (date) {
                let time = new Date(date).getTime();
                str += this.$timeFormat(time, format);
            } else {
                str = "- -";
            }
            return str;
        },

        getPriceFormat (value) {
            const val = parseInt(value)
            if (val) {
                return (val / 100).toFixed(2)
            } else {
                return '0.00'
            }
        },
        // 支付渠道
        getMethod (item) {
            const obj = {
                '1': 'Bank transfer',
            }
            return obj[item.paid_state] || ''
        },
        getPaymentById (id) {
            if (id != 0) {
                return payment_type[id];
            } else {
                return "consume";
            }
        },
        getTradeById (id) {
            return trade_type[id];
        },
        getStatusHtml (status) {
            // 1未入账、2已完成、3已取消
            if (status == 1) {
                return '<span style="color: #E37E00" >Processing</span>'
            } else if (status == 2) {
                return '<span style="color: #008552" >Completed</span>'
            } else if (status == 3) {
                return '<span style="color: #757575" >Cancelled</span>'
            }
        },

        handleCurrentChange (val) {
            this.$emit('reload', val)
        }

    },
    created () {

    },
};
</script>
<style lang="scss" scoped>
.wallet-recharge-record {
    margin-top: 40px;

    h3 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 18px;
        color: #212121;
        line-height: 18px;
    }

    .wallet-recharge-table {
        margin-top: 18px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        position: relative;
        overflow: hidden;

        dt,
        dd {
            display: flex;

            &>span {
                width: 16%;
                box-sizing: border-box;
                padding: 12px 24px;
                white-space: nowrap;
                text-align: center;


                &:nth-child(1) {
                    width: 16%;
                }

                &:nth-child(2) {
                    width: 16%;
                }

                &:nth-child(3) {
                    width: 16%;
                }

                &:nth-child(4) {
                    width: 16%;
                }

                &:nth-child(5) {
                    width: 20%;
                    text-align: center;
                }

                &:nth-child(6) {
                    width: 16%;
                    text-align: center;
                }

            }
        }


        dt {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #292929;
            line-height: 16px;
        }

        dd {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 16px;
            border-top: 1px solid #E6E6E6;
            cursor: pointer;

            span {
                padding-top: 16px;
                padding-bottom: 16px;
            }

            &:hover {
                background: #f6f6f6;
                color: #000;
            }
        }


        .common-page {
            border-top: 1px solid #E6E6E6;
            padding: 10px 28px;
            justify-content: flex-end;
        }


    }


}


.recharge-detail {
    padding: 24px;
    width: 738px;
    min-height: 786px;
    background: #FAFAFA;
    box-sizing: border-box;

    &>h2 {
        display: flex;

        strong {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 24px;
            color: #000000;
            line-height: 28px;
        }

        span {
            display: flex;
            align-items: center;
            margin-left: 8px;
            height: 24px;
            background: #E37E00;
            border-radius: 12px;
            line-height: 24px;
            padding: 0 10px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #E37E00;

            &::before {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 4px;
                margin-right: 4px;
                background: #E37E00;
            }

            &[status="1"] {
                color: #E37E00;
                background-color: rgba(227, 126, 0, 0.1);

                &::before {
                    background-color: #E37E00;
                }
            }

            &[status="2"] {
                color: rgba(0, 133, 82, 1);
                background-color: rgba(0, 133, 82, 0.1);

                &::before {
                    background-color: rgba(0, 133, 82, 1);
                }
            }

            &[status="3"] {
                color: #555555;
                background-color: rgba(13, 12, 34, 0.08);

                &::before {
                    background: #0D0C22;
                }
            }
        }
    }

    &>h3 {
        margin-top: 10px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #757575;
        line-height: 16px;

        &+h3 {
            margin-top: 8px;
        }
    }

    &>h4 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 16px;
        color: #292929;
        line-height: 16px;
        margin-top: 22px;
    }

    .detail-actual {
        margin-top: 12px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        position: relative;
        display: flex;
        padding: 28px 20px;

        .detail-actual-amount {
            flex: 1;

            p {
                display: flex;

                &+p {
                    margin-top: 12px;
                }

                strong {
                    width: 176px;
                    text-align: right;
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    color: #555555;
                    line-height: 16px;
                    margin-right: 10px;

                    em {
                        display: block;
                        font-family: Roboto, Roboto;
                        font-weight: 500;
                        font-size: 12px;
                        color: #555555;
                    }
                }

                span {
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #000000;
                    line-height: 16px;
                }
            }
        }

        .detail-actual-total {
            width: 40%;
            border-left: 1px dashed #CCCCCC;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            span {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #000000;
                line-height: 16px;
            }

            strong {

                margin-top: 8px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 22px;
                color: #000000;
                line-height: 28px;
            }
        }
    }


    .detail-transfer {

        margin-top: 12px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0 20px 20px;

        h5 {
            display: flex;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
            padding: 14px 0;
            border-bottom: 1px dashed #CCCCCC;
            margin-bottom: 20px;

            span {
                width: 178px;
                text-align: right;
            }

            strong {
                font-weight: 500;
                margin-left: 10px;
            }
        }

        p {
            display: flex;

            &+p {
                margin-top: 10px;
            }

            span {
                width: 178px;
                text-align: right;
                font-family: Roboto, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #555555;
                line-height: 16px;
            }

            strong {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                line-height: 16px;
                margin-left: 10px;
            }
        }

        figure {
            position: absolute;
            width: 77px;
            height: 80px;
            bottom: 14px;
            right: 22px;
            border: 1px solid #ddd;

            img {
                position: absolute;
                max-width: 100%;
                max-height: 100%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            &>span {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 30px;
                height: 30px;
                transform: translate(-50%, -50%);
                transition: all 0.2s;
                cursor: pointer;
                color: #f6f6f6;
                display: none;


                svg {
                    width: 100%;
                    height: 100%;
                }

                &:hover {
                    color: #929292;
                }
            }

            &:hover>span {
                display: block;
            }
        }

    }

    .detail-bank {
        margin-top: 12px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        position: relative;
        padding: 22px 20px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 26px;
        text-align: left;
        white-space: nowrap;

        &::v-deep p {
            display: flex;
        }

        &::v-deep span {
            width: 150px;
            text-align: right;
        }

        &::v-deep strong {
            margin-left: 10px;
            font-weight: normal;
        }
    }



}
</style>
